<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="兑换活动编码">
        <br />
        <br />
        <el-input
          v-model="formInline.activityCode"
          placeholder
          style="margin-left:-80px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="发布状态">
        <br />
        <br />
        <el-select
          v-model="formInline.status"
          style="margin-left:-60px;width:200px"
        >
          <el-option label="全部" value></el-option>
          <el-option label="已发布" value="1"></el-option>
          <el-option label="未发布" value="0"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="创建时间：">
          <el-date-picker
              v-model="formInline.createTimeRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @focus="focusPickerDate"
          ></el-date-picker>
      </el-form-item>
      <br /> -->
      <el-form-item label="兑换活动名称">
        <br />
        <br />
        <el-input
          v-model="formInline.activityName"
          placeholder
          style="margin-left:-80px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="开展状态">
        <br />
        <br />
        <el-select
          v-model="formInline.runStatus"
          style="margin-left:-60px;width:200px"
        >
          <el-option label="全部" value></el-option>
          <el-option label="未开始" value="1"></el-option>
          <el-option label="进行中" value="2"></el-option>
          <el-option label="已结束" value="3"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="　有效期：">
          <el-date-picker
              v-model="formInline.runTimeRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @focus="focusPickerDate2"
          ></el-date-picker>
      </el-form-item> -->
      <el-form-item style="margin-left:700px;text-align:right">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
          size="mini"
          >查询</el-button
        >
        <!-- </el-form-item>
        <el-form-item> -->
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <!-- </el-form-item>
        <el-form-item> -->
        <el-button
          type="primary"
          @click="toAdd()"
          icon="el-icon-edit"
          size="mini"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      height="400px"
      style="width: 100%;"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activityCode"
        label="兑换活动编码"
        align="center"
        width="150"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="activityName"
        label="兑换活动名称"
        header-align="center"
        width="200"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="joinCount"
        label="参与情况"
        header-align="center"
        align="center"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.joinCount != null">
              <a
                @click="seedetail(scope.row)"
                style="color:blue;cursor:pointer"
              >
                {{ scope.row.joinCount }}</a
              >
            </span>
            <span v-if="scope.row.joinCount == null">—</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="activityDesc"
        label="兑换活动说明"
        header-align="center"
        align="left"
        width="250"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="开始时间"
        align="center"
        width="250"
        prop="activityBeginTime"
      ></el-table-column>
      <el-table-column
        prop="activityEndTime"
        label="截止时间"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column label="发布状态" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">未发布</span>
          <span v-if="scope.row.status == '1'">已发布</span>
        </template>
      </el-table-column>
      <el-table-column label="开展状态" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">未开始</span>
          <span v-if="scope.row.type == 2">进行中</span>
          <span v-if="scope.row.type == 3">已过期</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="200"
        align="center"
        header-align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div style="width:120px;text-align:left;margin:0 auto">
            <el-button type="text" @click="toDetail(scope.row)"
              >详情
            </el-button>
            <el-button
              type="text"
              @click="toEdit(scope.row)"
              v-if="scope.row.status == 0"
              >编辑
            </el-button>
            <el-button
              type="text"
              @click="updateGoodsActivityStatus(scope.row.uuid, '1')"
              v-if="scope.row.status == 0"
              >发布
            </el-button>
            <el-button
              type="text"
              @click="updateGoodsActivityStatus(scope.row.uuid, '0')"
              v-if="scope.row.status == 1"
              >撤回
            </el-button>
            <!-- <el-button
                type="text"
                @click="deleteGoodsActivity(scope.row.uuid)"
                v-if="scope.row.status == '0'"
            >删除</el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      title="参与详情"
      :visible.sync="dialogVisibledetail"
      width="70%"
      custom-class="el-dialog-star"
      top="3vh"
    >
      <el-form
        :inline="true"
        :model="formCoupon"
        class="search-form-inline"
        style="margin-top:-20px;"
      >
        <el-input
          v-model="formCoupon.shopName"
          style="width:200px;"
          placeholder="专卖店名称"
          clearable
        ></el-input>
        <el-input
          v-model="formCoupon.warzoneName"
          style="width:200px;"
          placeholder="大区名称"
          clearable
        ></el-input>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="(listQuery2.current = 1), queryJoinStoreInfo()"
          >查询
        </el-button>
        <!--        <el-button-->
        <!--          @click="exportToo"-->
        <!--          style="margin-top: 0px;"-->
        <!--          size="mini"-->
        <!--          type="success"-->
        <!--          icon="el-icon-s-data"-->
        <!--          :loading="exportLoading"-->
        <!--        >导出</el-button>-->
      </el-form>
      <el-table
        :data="couponListshop"
        border
        style="font-size: 10px;width:100%;margin-top:10px;"
        height="300"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        ></el-table-column>
        <!--<el-table-column prop="couponNo" label="卡券编号" width="200" header-align="center"></el-table-column>-->
        <el-table-column
          prop="authCode"
          label="授权码"
          width="120"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="storeName"
          label="专卖店名称"
          width="200"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="upOrgZone"
          label="所属大区"
          width="200"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="storeAddressDetail"
          label="门店地址"
          width="230"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="参与时间"
          align="right"
          width="180"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibledetail = false">取 消</el-button>
        <!-- <el-button type="primary" @click="couponConfirm()">确 定</el-button> -->
      </span>
      <div class="block" style="margin-top:5px;">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
          :current-page="listQuery2.current"
          :page-size="listQuery2.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryGoodsActivityList,
  updateGoodsActivityStatus,
  deleteGoodsActivity,
  queryJoinStoreInfo,
} from '@/api/IntegralActivity';

const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = curDate.getDate();
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};

export default {
  data() {
    return {
      keepAlive: true,
      loading: true,
      uuid: '',
      formInline: {
        activityCode: '',
        activityName: '',
        status: '',
        runStatus: '',
        runTimeRange: ['', ''],
        createTimeRange: ['', ''],
      },
      dialogVisibledetail: false,
      couponListshop: [],
      formCoupon: {
        shopName: '',
        warzoneName: '',
      },
      listQuery2: {
        current: 1,
        size: 20,
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      tableData: [], //活动列表
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.queryGoodsActivityList();
  },
  methods: {
    //查询弹框
    seedetail(v) {
      this.formCoupon.shopName = '';
      this.formCoupon.warzoneName = '';
      this.dialogVisibledetail = true;
      this.uuid = v.uuid;
      let data = {
        size: this.listQuery2.size,
        current: this.listQuery2.current,
        condition: {
          activityId: v.uuid,
        },
        ascs: [],
        descs: [],
      };
      queryJoinStoreInfo(data).then((res) => {
        this.couponListshop = res.records;
        this.total2 = res.total;
      });
    },
    queryJoinStoreInfo() {
      let data = {
        size: this.listQuery2.size,
        current: this.listQuery2.current,
        condition: {
          activityId: this.uuid,
          storeName: this.formCoupon.shopName,
          upOrgZone: this.formCoupon.warzoneName,
        },
        ascs: [],
        descs: [],
      };
      queryJoinStoreInfo(data).then((res) => {
        this.couponListshop = res.records;
        this.total2 = res.total;
      });
    },
    //活动列表
    changeIsLimitQuantity(row, index, prow, pindex) {
      if (row.isLimitQuantity == 0) {
        //不限
        this.goodsList[pindex].giftList[index].giftQuantity = null;
      } else if (
        row.giftQuantity === null ||
        row.giftQuantity === undefined ||
        row.giftQuantity === ''
      ) {
        this.goodsList[pindex].giftList[index].giftQuantity = 1;
      }
    },
    queryGoodsActivityList() {
      if (
        this.formInline.createTimeRange == null ||
        this.formInline.createTimeRange == 0
      ) {
        this.formInline.createTimeRange = ['', ''];
      }
      if (
        this.formInline.runTimeRange == null ||
        this.formInline.runTimeRange == 0
      ) {
        this.formInline.runTimeRange = ['', ''];
      }
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          activityCode: this.formInline.activityCode.trim(),
          activityName: this.formInline.activityName.trim(),
          status: this.formInline.status,
          beginCreateTime:
            this.formInline.createTimeRange[0] == ''
              ? null
              : this.formInline.createTimeRange[0],
          endCreateTime:
            this.formInline.createTimeRange[1] == ''
              ? null
              : this.formInline.createTimeRange[1],
          type: this.formInline.runStatus,
          beginDate:
            this.formInline.runTimeRange[0] == ''
              ? null
              : this.formInline.runTimeRange[0],
          endDate:
            this.formInline.runTimeRange[1] == ''
              ? null
              : this.formInline.runTimeRange[1],
        },
        ascs: [],
        descs: [],
      };
      queryGoodsActivityList(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    fixData(row, column, cellValue, index) {
      if (cellValue == null || cellValue == '') return '';
      return cellValue.substring(0, 10);
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.queryGoodsActivityList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.queryGoodsActivityList();
    },
    handleSizeChange2(val) {
      this.listQuery2.size = val;
      this.queryJoinStoreInfo();
    },
    handleCurrentChange2(val) {
      this.listQuery2.current = val;
      this.queryJoinStoreInfo();
    },
    //查询
    search() {
      this.listQuery.current = 1;
      this.queryGoodsActivityList();
    },
    //清空
    kong() {
      this.formInline.activityCode = '';
      (this.formInline.activityName = ''), (this.formInline.status = '');
      this.formInline.runStatus = '';
      this.formInline.runTimeRange = ['', ''];
      this.formInline.createTimeRange = ['', ''];
    },
    //添加活动
    toAdd() {
      this.$router.push({
        name: 'IntegralActivityEdit',
        params: {},
      });
    },
    //查看活动
    toDetail(item) {
      this.$router.push({
        name: 'IntegralActivityEdit',
        params: {
          edit: item,
          disabledFlag: true,
          disabledFlagone: true,
        },
      });
    },
    //编辑活动
    toEdit(item) {
      this.$router.push({
        name: 'IntegralActivityEdit',
        params: {
          edit: item,
          disabledFlag: false,
          disabledFlagone: false,
        },
      });
    },
    updateGoodsActivityStatus(uuid, status) {
      var msg = '';
      if (status == '1') {
        msg = '发布';
      } else if (status == '0') {
        msg = '撤回';
      }
      this.$confirm('确定' + msg + '当前活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status,
          };
          updateGoodsActivityStatus(data).then((res) => {
            if (res.code == '1') {
              this.$message({
                showClose: true,
                message: msg + '成功',
                type: 'success',
              });
              this.queryGoodsActivityList();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error',
              });
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    deleteGoodsActivity(uuid, status) {
      this.$confirm('确定删除当前活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status,
          };
          deleteGoodsActivity(data).then((res) => {
            if (res.code == '1') {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success',
              });
              this.queryGoodsActivityList();
            } else {
              this.$message.error('删除失败');
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    //点击空白日期初始化
    focusPickerDate() {
      this.formInline.createTimeRange = [curDateStr(), curDateStr()];
    },
    focusPickerDate2() {
      this.formInline.runTimeRange = [curDateStr(), curDateStr()];
    },
    //数字格式化
    dateRange(row, column, cellValue, index) {
      if (row.beginDate != null && row.beginDate.toString().length >= 10) {
        return (
          row.beginDate.toString().substr(0, 10) +
          ' — ' +
          row.endDate.toString().substr(0, 10)
        );
      } else {
        return '—';
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
